@use 'sass:map'; // 导入map模块

$themes: (
  dark: (
    text-color: #fff,
    background-color: #000,
    primary-color: #4a90e2,
    secondary-color: #2c3e50,
    border-color: #333,
    hover-color: #666,
    shadow-color: rgb(255 255 255 / 10%)
  ),
  light: (
    text-color: #000,
    background-color: #fff,
    primary-color: #3498db,
    secondary-color: #f5f6fa,
    border-color: #ddd,
    hover-color: #eee,
    shadow-color: rgb(0 0 0 / 10%)
  )
);
$currentTheme: '';

@mixin useTheme() {
  @each $key, $value in $themes {
    $currentTheme: $key !global;
    html[data-theme='#{$key}'] & {
      @content;
    }
  }
}

@function getVar($key) {
  $themeMap: map.get($themes, $currentTheme);

  @return map.get($themeMap, $key);
}

// 添加全局过渡效果
:root {
  * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
      box-shadow 0.3s ease;
  }
}

// 示例组件样式
.item {
  padding: 1rem;
  font-size: 16px;
  border: 1px solid;
  border-radius: 4px;
  box-shadow: 0 2px 4px;

  @include useTheme {
    color: getvar('text-color');
    background-color: getvar('background-color');
    border-color: getvar('border-color');
    box-shadow: 0 2px 4px getvar('shadow-color');

    &:hover {
      background-color: getvar('hover-color');
    }
  }
}

// 按钮样式示例
.button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  @include useTheme {
    color: getvar('text-color');
    background-color: getvar('primary-color');

    &:hover {
      background-color: getvar('hover-color');
    }
  }
}

// html[data-theme="dark"] {
//   .item {
//     color: #fff;
//     background-color: #000;
//   }
// }

// html[data-theme="light"] {
//   .item {
//     color: #000;
//     background-color: #fff;
//   }
// }
